iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
2
Modern Web

一隻巨大的UI/UX菜鳥系列 第 16

【Day16】好用的Wireframe軟體!

  • 分享至 

  • xImage
  •  

來到Monospace後,
跟隔壁工程師團有了一些機會合作專案。
也因此幸運地向他們學習到很多沒有接觸過的軟體及知識/images/emoticon/emoticon24.gif

這次的專案是一個訂便當系統。
因為Monospace每天的午餐都是最標準的訂便當流程,
傳閱菜單、劃自己要的、主揪收菜單收錢找錢、確認沒有漏掉的人後,打電話。

然後隔壁的工程師團某天突然叮!一聲,

覺得怎麼不自己寫一個線上的訂便當系統呢?
於是這個專案就產生了/images/emoticon/emoticon37.gif(可以這樣形容嗎…

這個專案,小妹擔任的職位是UI介面設計。
從來沒有接觸過的崗位讓我很是緊張,深怕會雷到隊友QAQ
但是小妹的隊友人都超好阿阿阿阿各種包容!!(大哭

初次接觸介面設計,才知道了Wireframe(架構線框圖)這個東西的必要性。
最初小組討論時都是直接畫手稿當作Wireframe,
但小妹一直覺得自己的手稿會讓工程師看不懂阿阿阿!
後來看到另一組的工程師推薦了一個
畫Wireframe的軟體

非常好用!也推薦給大家!/images/emoticon/emoticon42.gif

【Balsamiq】

https://ithelp.ithome.com.tw/upload/images/20180105/20107810TboRCXAxA4.png
沒錯!就是這個奇怪的笑臉XD
它是個專門畫Wireframe的軟體,裡面都是很可愛的手稿可以直接拉進畫面使用。
wiki

(圖片取自Balsamiq的官方網站)

這是用Balsamiq畫的WIKI維基百科Wireframe架構。
大家可以點進來看看笑臉的介紹影片!非常的神之好用!
Yes

笑臉能做到的事情非常多,能使用的元件也有各式各樣。
有網頁的、手機的、iOS的、一堆奇怪按鈕跟框框的(?)
打開的畫面如下:

https://ithelp.ithome.com.tw/upload/images/20180105/20107810J5oQoPThNA.png

這是小妹隨意亂把元件拖下來擺放給大家看功能的XD請別介意這奇怪的畫面XDD

然後也被大家發現我是載試用版了...
目前破解版只有MAC有,PC沒有RRRR...
被世界拋棄的PC/images/emoticon/emoticon02.gif

推薦這個好用的Wireframe軟體給大家,希望能幫助到正在畫Wireframe的你!


上一篇
【Day15】菜鳥默默地走到了一半的路程!
下一篇
【Day17】PC界的Zeplin!
系列文
一隻巨大的UI/UX菜鳥30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿陰
iT邦新手 4 級 ‧ 2018-01-05 00:06:01

隔壁團撒野的工程師來簽到 /images/emoticon/emoticon08.gif
內文還沒更新,先猜是不是我推坑的 MarkMan(馬克鰻) 呢?/images/emoticon/emoticon07.gif

GG iT邦新手 5 級 ‧ 2018-01-05 12:48:31 檢舉

哈哈哈哈對!!!!!!!
不愧是大隊長Ryin!!!!XDDDD
不過小妹想分成兩篇來介紹~~~先介紹Balsamiq再來介紹你推坑的MarkMan/images/emoticon/emoticon37.gif

我要留言

立即登入留言